<!--表格抽屉组件-->
<template>
  <a-drawer
    v-model:visible="show"
    class="custom-class"
    :title="title"
    :width="width"
    :placement="placement"
    :destroy-on-close="true"
    @after-visible-change="$emit('update:visible', $event)"
  >
    <slot />
  </a-drawer>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults, onMounted, ref, defineEmits, watch } from 'vue'
export interface DrawerProps {
  // 主键id
  id?: string
  // 操作类型 新增=0、查看=1、修改=2 、删除=3
  type?: number
  // 接口名
  api?: string
  // 抽屉的方向  	'top' | 'right' | 'bottom' | 'left'
  placement?: string
  // 标题
  title?: string
  // 宽度
  width?: string
  // 是否可见
  visible: boolean
  // 查询接口
  getApi?: Function
}
const show = ref<Boolean>(false)
// 默认属性
const props = withDefaults(defineProps<DrawerProps>(), {
  api: '',
  id: '',
  type: -1,
  title: '默认标题',
  placement: 'right',
  width: '500',
  visible: false,
})
onMounted(() => {
  show.value = props.visible
})
// 获取数据后回传给父组件
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
}>()
// 数据初始化
watch(props, async () => {
  show.value = props.visible
})
</script>

<style scoped lang="scss"></style>
